<template>
  <el-card shadow="never" class="filter-wrap">
    <el-row :gutter="40">
      <el-col :sm="8" :lg="4" class="d-flex f-align">
        <span class="filter-title mr-10">成员</span>
        <el-input
          type="text"
          v-model="params.keywords.realName"
          size="small"
          @keyup.native.enter="search"
        ></el-input>
      </el-col>
      <el-col :sm="8" :lg="4" class="d-flex f-align">
        <span class="filter-title mr-10">登录账号</span>
        <el-input
          type="text"
          v-model="params.keywords.account"
          size="small"
          @keyup.native.enter="search"
        ></el-input>
      </el-col>
      <el-col :sm="8" :lg="4" class="d-flex f-align">
        <span class="filter-title mr-10">角色</span>
        <el-select
          v-model="params.filter.roleCode"
          placeholder="请选择"
          size="small"
          @change="search"
          clearable
        >
          <el-option v-for="item in roles" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :sm="8" :lg="4" class="d-flex f-align">
        <span class="filter-title mr-10">部门</span>
        <el-select
          v-model="params.filter.organCode"
          placeholder="请选择"
          size="small"
          clearable
          @change="search"
        >
          <el-option
            v-for="item in organs"
            :key="item.organCode"
            :label="item.organName"
            :value="item.organCode"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :sm="8" :lg="4" class="d-flex f-align">
        <span class="filter-title mr-10">手机</span>
        <el-input
          type="text"
          v-model="params.keywords.mobile"
          size="small"
          @keyup.native.enter="search"
        ></el-input>
      </el-col>
      <el-col :sm="8" :lg="4" class="d-flex f-align">
        <span class="filter-title mr-10">状态</span>
        <el-select
          v-model="params.filter.accountStatus"
          placeholder="请选择"
          size="small"
          clearable
          @clear="params.filter.accountStatus=null"
          @change="search"
        >
          <el-option label="在职" :value="1"></el-option>
          <el-option label="离职" :value="0"></el-option>
        </el-select>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { rolesAllList } from "api/seting/role";
import { organAllList } from "api/seting/organization";
export default {
  data() {
    return {
      params: {
        keywords: {
          realName: "",
          account: "",
          mobile: ""
        },
        filter: {
          roleCode: "",
          organCode: "",
          accountStatus: null
        }
      },
      roles: [],
      organs: []
    };
  },
  created() {
    this.loadRoles();
    this.loadOrgan();
  },
  methods: {
    // 关键字搜索
    search() {
      this.$emit('search',this.params)
    },
    // 加载所有角色
    loadRoles() {
      rolesAllList({ params: {} }).then(res => {
        this.roles = res.data;
        this.$parent.roles = res.data;
      });
    },
    // 加载所有组织架构
    loadOrgan() {
      organAllList({ params: {} }).then(res => {
        this.organs = res.data;
        this.$parent.organs = res.data;
      });
    }
  }
};
</script>
<style scoped lang="scss">
.filter-wrap {
  .filter-title {
    flex-shrink: 0;
  }
}
</style>
